<template>
<view>
	<div>
	<transition-group name="group">
	<div class="myLoading" :key="'myLoading'" v-show="show" >
		<div class="loading-center-absolute" >
			<div class="object object_four"></div>
			<div class="object object_three"></div>
			<div class="object object_two"></div>
			<div class="object object_one"></div>			
		</div>
		<p class="tip">
			正在加载中...
		</p>
	</div>
	</transition-group>
	</div>
</view>
</template>

<script>
	export default {
		data(){
			return {
				
			}
		},
		props:{
			show:false
		}
	}
</script>

<style lang="less" scoped>
	.group-enter,.group-leave-to{
		opacity: 0;
	}
	.group-enter-to,.group-leave{
		opacity: 1;
	}
	.myLoading{
		position: absolute;
		left: 50%;
		top: 50%;
		height: 200upx;
		width: 200upx;
		z-index:999;
		margin-top: -100upx;
		margin-left: -100upx;
		// background:#17607d;
		border-radius: 20upx;
		background:#FFF;
		box-shadow: 0px 0px 40upx 2upx #ccc;
		transition: opacity .5s ease;
	}
	.tip{
		position: absolute;
		width: 200upx;
		bottom:30upx;
		font-size: 26upx;
		color:#999;
		text-align: center;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
	}
	.loading-center-absolute {
		position: absolute;
		left: 50%; 
		top: 40%;
		height: 400upx;
		width: 400upx;
		margin-top: -200upx;
		margin-left: -200upx;
		// -ms-transform: rotate(-135deg); 
	 //   	-webkit-transform: rotate(-135deg) scale(.7); 
	    transform: rotate(-135deg) scale(.4);	
	}
	.object{	
		-moz-border-radius: 50% 50% 50% 50%;
		-webkit-border-radius: 50% 50% 50% 50%;
		border-radius: 50% 50% 50% 50%;
		position: absolute;
		border-top: 10upx solid #7BA2F0;
		border-bottom: 10upx solid transparent;
		border-left:  10upx solid #7BA2F0;
		border-right: 10upx solid transparent;		
		-webkit-animation: animate 2s infinite;
		animation: animate 2s infinite;		
		}	
	
	.object_one{
		left: 150upx;
		top: 150upx;
		width: 100upx;
		height: 100upx;
		}
								
	.object_two{
		left: 130upx;
		top: 130upx;
		width: 140upx;
		height: 140upx;
		-webkit-animation-delay: 0.2s;
	    animation-delay: 0.2s;
		}
			
	.object_three{
		left: 110upx;
		top: 110upx;
		width: 180upx;
		height: 180upx;
		-webkit-animation-delay: 0.4s;
	    animation-delay: 0.4s;
		}
	.object_four{
		left: 90upx;
		top: 90upx;
		width: 220upx;
		height: 220upx;
		-webkit-animation-delay: 0.6s;
	    animation-delay: 0.6s;		
		}	
	
	@-webkit-keyframes animate {
	50% {	
		-ms-transform: rotate(360deg) scale(0.8); 
	   	-webkit-transform: rotate(360deg) scale(0.8); 
	    transform: rotate(360deg) scale(0.8); 
	  }
	}
	
	@keyframes animate {
	50% {	
		-ms-transform: rotate(360deg) scale(0.8); 
	   	-webkit-transform: rotate(360deg) scale(0.8); 
	    transform: rotate(360deg) scale(0.8); 
	  }
		}


</style>
